<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <image class="back-icon" src="/static/jiantou2_1.png"></image>
      <view class="title">商品概览</view>
      <view class="right-icons">
        <image class="icon" src="/static/shuaxin_1.png"></image>
        <image class="icon" src="/static/shanchu_1.png"></image>
      </view>
    </view>

    <!-- 商品基本信息 -->
    <view class="product-info">
      <image class="product-image" src="/static/Group_427319264.png" mode="aspectFill"></image>
      <view class="info-content">
        <view class="product-name">比例金手套</view>
        <view class="shop-info">
          <!-- <image class="tag-icon" src="/static/Group_427319273.png"></image> -->
          <view class="category">器材</view>
         
        </view>
        <view class="no-description">暂无商品介绍</view>
      </view>
	   <view class="shop-names">下沙店</view>
    </view>

    <!-- 功能操作区 -->
    <view class="function-area">
      <view class="section-title">功能操作</view>
      <view class="function-grid">
        <view class="function-item" v-for="(item, index) in functionItems" :key="index">
          <image class="function-icon" :src="item.icon"></image>
          <text class="function-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 销售成本信息 -->
    <view class="cost-info">
		<view class="info-ul">
			<view class="section-title">销售成本信息</view>
			 <view class="cost-setting">
			   <text class="setting-text">销售成本设置</text>
			   <image class="arrow-icon" src="/static/jiantou2_3.png"></image>
			 </view>
		</view>

	  <view class="cost-content">
        <text class="cost-desc">因当前商品销售成本配置为批次成本，故以批次入库价以先进先出的方式计算成本</text>
        <view class="cost-detail">
          <text class="cost-label">批次成本价:</text>
          <text class="cost-value">我点查看批次列表</text>
        </view>

      </view>
    </view>

    <!-- 规格信息 -->
    <view class="spec-info">
      <view class="section-title">规格信息</view>
      <view class="spec-header">
        <text class="header-item">规格名称</text>
        <text class="header-item">剩余库存</text>
        <text class="header-item">零售价</text>
      </view>
      <view class="spec-list">
        <view class="spec-item" v-for="(spec, index) in specItems" :key="index">
          <text class="spec-name">{{ spec.name }}</text>
          <text class="spec-stock">{{ spec.stock }}</text>
          <text class="spec-price">{{ spec.price }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      functionItems: [
        {
          icon: "/static/xiugai07_1.png",
          text: "修改商品"
        },
        {
          icon: "/static/zengjianguagouyufenxi_1.png",
          text: "增减库存"
        },
        {
          icon: "/static/Group 427319243.png",
          text: "库存调拨"
        },
        {
          icon: "/static/shuaxin_2.png",
          text: "重置库存"
        },
        {
          icon: "/static/dingdan-4_3.png",
          text: "库存记录"
        },
        {
          icon: "/static/dingdan-4_2.png",
          text: "批次列表"
        },
        {
          icon: "/static/dingdan-7_1.png",
          text: "最近订单"
        }
      ],
      specItems: [
        {
          name: "默认规格",
          stock: "0.00/包",
          price: "¥88.00"
        },
        {
          name: "吧台（往外卖的）",
          stock: "0.00/包",
          price: ""
        }
      ]
    };
  }
};
</script>

<style lang="scss">
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  background-image: url('/static/Group_427319214.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx;


  .back-icon {
    width: 40rpx;
    height: 40rpx;
  }

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }

  .right-icons {
    display: flex;
    gap: 40rpx;

    .icon {
      width: 44rpx;
      height: 44rpx;
    }
  }
}

.product-info {
	
	margin: 40rpx  20rpx 0 20rpx;
	padding: 22rpx 0 32rpx 42rpx;
	box-sizing: border-box;
  display: flex;
  // padding: 30rpx;
  		  background-image: url('/static/Rectangle_34624259.png');
  		  background-size: cover;
  		  background-position: center;
  		  background-repeat: no-repeat;
		  background-position: 0 0rpx;
  margin-bottom: 20rpx;

  .product-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    margin-right: 30rpx;
	margin-top: -48rpx;
	background-color: red;
  }

  .info-content {
    flex: 1;

    .product-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 10rpx;
    }

    .shop-info {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .tag-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }

      .category {
		  box-sizing: border-box;
        font-size: 28rpx;
        color: #1EBE76;
        // background-color: #1EBE76;
		border: 1rpx solid #1EBE76;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 4rpx 12rpx;
      
      }
    }

    .no-description {
      font-size: 28rpx;
      color: #999999;
    }
  }
  .shop-names {
	  // margin-top: 26rpx;
	  box-sizing: border-box;
  		  width:134rpx;
  		  height: 50rpx;
  		  // background-color: #E64340;
  		  color: #fff;
  		  // z-index: 99;
  		  background-image: url('/static/Group_427319278.png');
  		  background-size: cover;
  		  background-position: center;
  		  background-repeat: no-repeat;
  font-weight: bold;
  font-size: 28rpx;
  color: #FFFFFF;
  text-align: center;

  }
}

.function-area {
	margin: 20rpx;
  background-color: #ffffff;
  padding: 20rpx 36rpx;
  margin-bottom: 20rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
  .section-title {
    font-weight: bold;
    font-size: 28rpx;
    color: #0A2016;
    // margin-bottom: 34rpx;
    // padding-bottom: 20rpx;
  }

  .function-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;

    .function-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 0;

      .function-icon {
        width: 52rpx;
        height: 52rpx;
        margin-bottom: 12rpx;
      }

      .function-text {
        font-size: 24rpx;
        color: #666666;
        text-align: center;
      }
    }
  }
}

.cost-info {
	border-radius: 16rpx 16rpx 16rpx 16rpx;
  background-color: #ffffff;
  padding: 20rpx 36rpx;
  margin:0 20rpx 20rpx 20rpx;
    .info-ul{
		display: flex;
	    justify-content: space-between;
		.section-title {
		  font-size: 28rpx;
		  font-weight: bold;
		  color: #333333;
		  // margin-bottom: 30rpx;
		  // padding-bottom: 20rpx;
		
		}
		.cost-setting {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		
		  border-top: 2rpx dashed #f0f0f0;
		
		  .setting-text {
		    font-size: 24rpx;
		    color: #1EBE76;
		  }
		
		  .arrow-icon {
		    width: 32rpx;
		    height: 32rpx;
		  }
		}
	}


  .cost-content {
	  box-sizing: border-box;
	  margin-top: 34rpx;
    .cost-desc {
      font-size: 28rpx;
      color: #666666;
  
    }

    .cost-detail {
      display: flex;
    
      // margin-bottom: 30rpx;

      .cost-label {
        font-size: 28rpx;
        color: #666666;
      }

      .cost-value {
		  margin-left: 15rpx;
        font-size: 28rpx;
        color: #1EBE76;
      }
    }


  }
}

.spec-info {
  background-color: #ffffff;

margin: 0 20rpx;
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
  padding: 20rpx 36rpx;
  }

  .spec-header {
    display: flex;
    justify-content: space-between;
  width: 710rpx;
  height: 72rpx;
  line-height: 72rpx;
background: rgba(30,190,118,0.1);
    .header-item {
      font-size: 24rpx;
      color: #999999;
      width: 33%;
      text-align: center;
    }
  }

  .spec-list {
    .spec-item {
      display: flex;
      justify-content: space-between;
      padding: 30rpx 20rpx;
      border-bottom: 2rpx solid #f0f0f0;

      .spec-name {
        font-size: 24rpx;
        color: #333333;
        width: 33%;
        text-align: center;
      }

      .spec-stock {
        font-size: 24rpx;
        color: #333333;
        width: 33%;
        text-align: center;
      }

      .spec-price {
        font-size: 24rpx;
        // color: #E64340;
        width: 33%;
        text-align: center;
        // font-weight: bold;
      }
    }
  }
}
</style>